<template>
<Header title="商品详情"/>
<div class=''>
  <div class="content">  
     <div class="img">
        <img :src="DOMAIN + good.goods_img">
     </div>
      <h3>{{good.goods_name}}</h3>
      <span>
         这是商品的简介<br>
         这是商品的简介<br>
         这是商品的简介<br>
         这是商品的简介<br>
      </span>
  </div>

  <div id="bottom">
     <div @click="createOrder">立即购买</div>
     <div>|</div>
     <div @click="addToCart">加入购物车</div>
  </div>
</div>
</template>

<script>
import Header from "../components/Header.vue";
import { getGoodById } from "../api/goods";
import { onMounted, reactive } from '@vue/runtime-core';
import { DOMAIN } from "../utils/const";
import { addCart } from "../api/cart";

import { Dialog } from "vant/es/dialog"
import "vant/es/dialog/style"

export default {
    props: {
      good_id: {
         type: String,
      }
    },
    components:{
       Header,
       [Dialog.name] : Dialog
    },
   setup(props, context) {
      const good = reactive({})
      onMounted(()=>{
         getGoodById(props.good_id).then((res)=>{
            console.log(res)
            //good = res.result //直接赋值会丢失响应性
            Object.assign(good, res.result) 
         })
      })
      const addToCart = ()=>{
          addCart(props.good_id).then((res) => {
               alert("添加成功")
           })
      }
      const createOrder = ()=>{
         alert("暂未开放");
         Dialog({ message: '提示' });
      }
      return {
          good,
          DOMAIN,
          addToCart,
          createOrder
      };
   },
}
</script>
<style  scoped>
.content{
   padding-bottom: 100px;
}
.img{
   text-align: center;/** 水平居中 */
}
#bottom{
   background-color: darkorange;
   color: white;
   font-size: 40px;

   margin-bottom: 40px;
   display: flex;
   justify-content: space-around;

   position: fixed;/* 脱离了文档流 */
   bottom: 0;

   width: 100%;/* fixed之后  还真不是占一行了。。。需要设置一个宽度...*/
   padding: 25px 10px;
   border-radius: 20px;
}

div img{
  width: 700px;
  height: 700px;
}
</style>